<template>
    <div class="page-tags">
        <div v-for="(item, index) of list" :key="index" class="page-tags-li" :class="{

            'page-tags-li-select': item.key == selectKey,
        }" @click="clickItem(item)">
            <span class="page-tags-li-span">{{ item.name }}</span>
            <span class="page-tags-li-bottomChunk" v-if="showChunck"></span>
        </div>
    </div>
</template>
<script>

export default {
    props: {
        list: {
            type: Array,
            default() {
                return [
                    { name: "测试Tags", key: 0 },
                    { name: "测试Tags", key: 1 },
                    { name: "测试Tags", key: 2 },
                    { name: "测试Tags", key: 3 },
                    { name: "测试Tags", key: 4 },
                ]
            }
        },
        selectKey: {
            type: Number,
            default: 0
        },
        showChunck: {
            type: Boolean,
            default: true
        }
    },

    data() {
        return {
        }
    },
    methods: {
        clickItem(item) {
            this.$emit("clickItem", item)
        }
    }
}

</script>
<style lang="scss" scoped>
$focusColor: rgb(54, 162, 234);

$defaultColor: transparent;

.page-tags-li-bottomChunk {
    display: inline-block;
    height: 3px;
    width: 100%;
    background-color: $defaultColor;
    margin-top: 10px;
    transition: 150ms background-color linear;
}

.page-tags-li-select {
    color: $focusColor;
}

.page-tags-li-select .page-tags-li-bottomChunk {
    background-color: $focusColor;
}

.page-tags {
    display: flex;
    gap: 30px;

    &-li {
        display: flex;
        flex-direction: column;
        font-size: 1.1rem;
        border-bottom: .2rem solid $defaultColor;
        transition: 150ms color linear;
    }
}
</style>